<!--品牌列表-->
<template>
  <ul>
    <li v-for="(item,index) in list" :key="index" @click="jumpDetails(item.id)">
      <img :src="item.logo" alt="图片加载失败...">
    </li>
  </ul>
</template>
<script>
export default {
  name: "brand",
  data() {
    return{
      list:this.$store.state.homeDisplay.brand
    }
  },
  methods: {
    jumpDetails(id) {
      this.$store.commit("changeBrand",id)
      this.$router.push({
        name: "brandDetails",
        params:{
          id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 后期删掉部分
div {
  width: 1200px;
  margin: auto;
  margin-top: 20px;
}
// 后期删掉部分
ul {
  width: 1200px;
  border-top: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  border-bottom: none;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  li {
    width: 148.875px;
    height: 88.5px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    transition: 0.3s all ease-out;

    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
    .el-image{
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;        
    }
    img {
      width: 100%;
      height: 100%;        
    }
  }
}
</style>
